<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Vue.js -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue@2.5/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <!-- 输入框用于粘贴内容 -->
        <textarea v-model="inputText" @paste="handlePaste" placeholder="请粘贴内容到这里..."
            style="width: 100%; height: 100px;"></textarea>

        <!-- 表格展示数据 -->
        <el-table :data="tableData" border height="720" style="margin-top: 20px;">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="idCard" label="身份证号"></el-table-column>
            <el-table-column prop="bankCard" label="银行卡号"></el-table-column>
            <el-table-column prop="bankName" label="银行名称"></el-table-column>
            <el-table-column prop="openBank" label="开户行"></el-table-column>
        </el-table>
        <el-row>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-row>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    inputText: '',
                    tableData: []
                };
            },
            methods: {
                handlePaste(event) {
                    // 获取剪贴板中的文本
                    const clipboardData = event.clipboardData || window.clipboardData;
                    const pastedText = clipboardData.getData('Text');

                    // 按行分割
                    const lines = pastedText.trim().split('\n');

                    // 转换为数组对象
                    this.tableData = lines.map(line => {
                        const [name, idCard, bankCard, bankName, openBank] = line.split('\t');
                        return { name, idCard, bankCard, bankName, openBank };
                    });

                    // 阻止默认粘贴行为（可选）
                    event.preventDefault();
                },
                handleSubmit() {
                    // 接口地址
                    const url = 'http://192.168.1.126:8080/api/test';

                    // 请求配置
                    const options = {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(
                            this.tableData  // 把 tableData 包装在 data 字段中发送
                        )
                    };

                    // 发送请求
                    fetch(url, options)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('网络响应异常');
                            }
                            return response.json();
                        })
                        .then(data => {
                            console.log('提交成功，返回结果:', data);
                            this.$message.success('提交成功');
                        })
                        .catch(error => {
                            console.error('提交失败:', error);
                            this.$message.error('提交失败，请查看控制台日志');
                        });
                }
            }
        });
    </script>
</body>

</html>